import React from 'react';
import {Card, Form, Input, Button, message,Icon,Checkbox} from 'antd';

const FormItem = Form.Item;


//
class FormLogin extends React.Component {

    handleValid = () => {
        const userInfo = this.props.form.getFieldsValue();

        this.props.form.validateFields((err, values) => {
            if (!err) {
                message.success(`${userInfo.userName} 恭喜你，登录成功，您本次密码为${userInfo.userPwd}`)
            }
        })
    };

    render() {
        console.log(this.props.form)
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <Card title="登录行内表单">
                    <Form layout="inline">
                        <FormItem>
                            <Input placeholder="请输入用户名"/>
                        </FormItem>
                        <FormItem>
                            <Input placeholder="请输入密码"/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary">登录</Button>
                        </FormItem>

                    </Form>

                </Card>
              {/*  <Card title="登录水平表单" style={{marginTop: 10}}>
                    <Form style={{width: 300}}>
                        <FormItem>
                            {
                                //两个参数：id值(字段对象)/对象{初始值和规则}
                                getFieldDecorator('userName', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '用户名不能为空！'
                                        },
                                        {
                                            max: 10,
                                            min: 5,
                                            message: '长度不在范围内'
                                        },
                                        {
                                            pattern: new RegExp('/^\\w+$','g'),
                                            message: '用户名必须为英文字母或者数字'
                                        }

                                    ]
                                })(
                                    //执行的语句
                                    <Input prefix={<Icon type="user"/>} placeholder="请输入用户名"/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('userPwd', {
                                    initialValue: '',
                                    rules: []
                                })(
                                    //执行的语句
                                    <Input prefix={<Icon type="lock"/>} placeholder="请输入密码"/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember', {
                                    valuePropName:'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>记住密码</Checkbox>
                                )
                            }
                            <a href="#" style={{float:'right'}}>忘记密码</a>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleValid}>登录</Button>
                        </FormItem>

                    </Form>

                </Card>*/}
            </div>
        );
    }


}

//需要放到最后export
export default Form.create()(FormLogin);


